<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/assets/css/business.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/plugin/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/plugin/adminlte/css/adminlte.min.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/plugin/bootstrap-font/bootstrap-icons.min.css" >
    <!--    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>-->
    <script src="/plugin/jquery-3.7.1.min.js" ></script>
    <script src="/plugin/adminlte/js/popper.min.js" ></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/adminlte/js/adminlte.min.js"></script>
    <script src="/plugin/axios.min.js"></script>
    <title>订餐个人中心</title>
    <style>



        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        #bar{
            list-style: none;
            background-color: white;
            height: 50px;
            width: 100vw;
            border: 1px solid rgba(0,0,0,0.1);
            line-height: 50px;
        }

        .container {
            opacity: 0.8;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 800px;
            margin: 0 auto;
        }

        .headr-right{
            float: right;
            margin-right: 20px;
        }

        .search-button{
            width: 20px; /* 调整图片大小 */
            height: auto;
            margin-right: 5px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .profile {
            margin-bottom: 30px;
        }
        .profile h2 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
        .profile-info {
            margin-top: 10px;
        }
        .order-history {
            margin-top: 30px;
        }
        .order-item {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .order-item h3 {
            margin-top: 0;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }
        .form-group button:hover {
            background-color: #0056b3;
        }

        .top-bar{
            list-style: none;
            float: left;
            padding: 0;
        }

        .top-bar li{
            float: left;
            margin-right: 10px;
        }

        .top-img{
            list-style: none;
            float: left;
        }
        .headr-right{
            float: right;
            margin-right: 20px;
        }

        a{
            color: #1a1d20;
        }

        /* Reset some default styles */
        body, h1, h2, h3, h4, p {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }

        /* 页面背景 */
        body {
            animation: changeBackground 15s infinite;
            background-size: cover;
        }

        @keyframes changeBackground {
            0% { background-image: url('/assets/img/food/yanhuoqi.jpg'); }
            33% { background-image: url('/assets/img/food/xishizaodian.jpg'); }
            66% { background-image: url('/assets/img/food/jiatingjucan.jpg'); }
            100% { background-image: url('/assets/img/food/shengyupian.jpg'); }
        }
        /* 顶部导航栏 */
        #bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background-color: rgba(255, 255, 255, 0.9); /* 背景透明 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        /* 按钮样式 */
        .btn {
            background-color: #5cb85c; /* 按钮颜色 */
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s; /* 添加动画效果 */
        }

        .btn:hover {
            background-color: #4cae4c; /* 悬停效果 */
            transform: scale(1.05); /* 放大效果 */
        }

        /* 容器 */
        .container {
            max-width: 800px;
            margin: 30px auto; /* 中心对齐 */
            padding: 20px;
            background: white; /* 背景白色 */
            border-radius: 8px; /* 圆角效果 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        h2 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #5c6bc0; /* 标题颜色 */
        }

        /* 信息区块 */
        .mb-3 {
            margin-bottom: 15px;
        }

        .title {
            background-color: #f7f7f7;
            padding: 10px;
            border-left: 5px solid #5c6bc0; /* 左侧边框来突出显示 */
            border-radius: 4px;
        }

        /* 输入框样式 */
        input[type="text"], input[type="tel"] {
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-top: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s;
            background-color: rgba(255, 255, 255, 0.7);
        }




            input[type="text"]:focus, input[type="tel"]:focus {
            border-color: #5c6bc0; /* 输入框聚焦时的边框颜色 */
            outline: none; /* 去掉默认聚焦样式 */
        }

        a {
            text-decoration: none; /* 隐藏链接下的横线 */
        }

        .profile-info {
            background-color: rgba(255, 255, 255, 1); /* 设置为半透明白色 */
            padding: 20px; /* 根据需要调整内边距 */
            border-radius: 8px; /* 可选：设置圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
        }


    </style>
</head>
<body onload="getuserDetail()" background="/assets/img/food/yezishui.jpg">

<div id="bar">
    <img class="top-img" src="/assets/img/HomeImg/logo.jpg" alt="标志" style="height: 50px">
    <ul class="top-bar">
        <li><a href="/Home">主页</a></li>
        <li><a href="/admin/login">商户中心</a></li>
        <li><a href="/user/login">用户中心</a></li>
        <li><a href="/user/UserHome">个人系统</a></li>
        <li><a href="#">我的足迹</a></li>
    </ul>
    <div class="headr-right">
        <label for="foodname" class="control-label">菜品</label>
        <input type="text" id="foodname" class="round-input" placeholder="请输入菜品">
        <img class="search-button" src="/assets/img/HomeImg/serach.png" alt="搜索">
        <a href="/user/UserOrder">
            <img class="search-button" src="/assets/img/HomeImg/cart.png" alt="购物车">
        </a>
        <img class="search-button" src="/assets/img/HomeImg/collection.png" alt="收藏">
        <img class="search-button" src="/assets/img/HomeImg/menu.png" alt="菜单">
    </div>
</div>
<div class="container">
    <h1>订餐个人中心</h1>

    <!-- 用户个人信息 -->
    <div class="profile">
        <h2>个人信息</h2>
        <div class="profile-info" id="profileInfo">
            <div class="mb-3">
                <input type="hidden" id="order_id" name="id">
                <label for="order_user_name">用户名称</label>
                <div class="title" id="order_user_name"></div>
            </div>

            <div class="mb-3">
                <label for="order_user_sex">用户性别</label>
                <div class="title" id="order_user_sex"></div>
            </div>

            <div class="mb-3">
                <label for="order_user_phone">用户电话</label>
                <div class="title" id="order_user_phone"></div>
            </div>

        </div>



        <!-- 显示修改按钮 -->
        <a href="/user/useralt?id=1"  class="btn btn-success btn-sm">修改个人信息</a>
    </div>


</div>


<script>

    function getuserDetail() {

        const searchParams = new URLSearchParams(window.location.search);
        const sid = searchParams.get('id');


        axios.get("/api/admin/userHome", {
            params: {
                id: sid
            }
        }).then(res => {
            const user = res.data;
            console.log(user)
            document.getElementById("order_user_name").innerText = user.username;
            document.getElementById("order_user_sex").innerText =user.gender;
            document.getElementById("order_user_phone").innerText = user.tel;
        })
    }

    function grabDataFromServer() {
        axios.get("/api/admin/userHome", {
        }).then(res => {
            bindTableData(res); // 绑定表格数据
        })
    }




</script>
</body>
</html>